<!--绑定谷歌验证器-->
<template>
  <div class="bg bg1">
    <template v-if="data">
      
      <div class="row">
        <LImage class="img-number bg2" :src="Config.img('1.png')"></LImage>
        <text class="font30 text2 all">{{T('从官方应用商店下载谷歌验证器')}}</text>
      </div>

      <div class="height60"></div>
      <div class="row">
        <LImage class="img-number bg2" :src="Config.img('2.png')"></LImage>
        <text class="font30 text2 all">{{T('将账户名称和密钥复制粘贴到谷歌验证器中，也可以直接扫描下方二维码。')}}</text>
      </div>

      <div class="height60"></div>
      <text class="font24 text3">{{T('账户名称')}}</text>
      <div class="row acenter" @click="copyClick(T('账户名称已复制'), data.gaName)">
        <text class="font30 text2 all">{{data.gaName}}</text>
        <LImage class="img-copy" :src="Config.img('copy.png')"></LImage>
      </div>
      <div class="line line1"></div>

      <text class="font24 text3">{{T('密钥')}}</text>
      <div class="row acenter" @click="copyClick(T('密钥已复制'), data.secret)">
        <text class="font30 text2 all">{{data.secret}}</text>
        <LImage class="img-copy" :src="Config.img('copy.png')"></LImage>
      </div>
      <div class="line line1"></div>

      <div class="code bg2">
        <div class="code-frame">
          <WeexQRCode class="code-qr" :code="data.barcodeUrl"></WeexQRCode>
        </div>
        <text class="font24 text2 acenter">{{T('请妥善备份账户名称和密钥以防遗失')}}</text>
      </div>

      <div class="all"></div>
      <div class="btn main-bt1" @click="httpBindGa">
        <text class="font30 text1">{{T('输入验证码绑定')}}</text>
      </div>
    </template>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.bg {
  flex: 1;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 40px;
}
.line{
  height: 1px;
  margin-right: -40px;
  margin-top: 14px;
  margin-bottom: 14px;
}
.img-number {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin-right: 20px;
}
.img-copy {
  width:32px;
  height:32px;
}

/*********** 二维码 */
.code {
  align-items: center;
  border-radius: 2px;
  padding-top: 60px;
  padding-bottom: 60px;

  margin-top: 44px;
}
.code-frame{
  background-color:#ffffff;
  padding: 10px;
  border-radius: 6px;

  margin-bottom: 30px;
}
.code-qr{
  width: 200px;
  height: 200px;
}

/*********** 按钮 */
.btn{
  align-items: center;
  justify-content: center;
  height:80px;
  border-radius:12px;

  margin-bottom:100px;
}

/****************** 间距 */
.height60 {
  height: 60px;
}
</style>

<script>

import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jhttps from "@/_js/https"; ;
import jconfig from "@/_js/config";

const weexFunction = weex.requireModule("WeexFunction");
const clipboard = weex.requireModule("clipboard");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('绑定谷歌验证器'));

export default {
  
  data() {
    return {
      T:T,
      Config:jconfig,

      data:undefined,
    };
  },

  mounted() {
    this.httpGtGaInfo();
  },

  methods: {
    
    /********************************** HTTP*/
    //https获取Ga信息
    httpGtGaInfo () {
      
      var param = {};
      jhttps.postX("systemV2/getGASecret", param,true,(data)=>{
        if(data.status == 200){
          data = data.data;
          data.barcodeUrl = "otpauth://totp/"+data.gaName+"?secret="+data.secret;
          this.data = data;
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    //https绑定Ga
    httpBindGa(){

      jmodal.showLoad();
      var param = {'secret':this.data.secret};
      jhttps.postGa("systemV2/bindGA",param,true,(data)=>{

        jmodal.hideLoad();
        if(data.status == 200){
          jmodal.toast('绑定成功');
          jnavigator.back();
        }else{
          jmodal.toast(data.msg);
        }
      });
    },
    
    /********************************** 点击*/
    //复制
    copyClick(msg, content){
      clipboard.setString(content);
      jmodal.toast(msg);
    },
  }
}
</script>
